<template>
  <div class="preWorkBox">
    <!-- 调试工位 -->
    <div class="content">
      <div class="contentDiv" v-if="submitShow==false">
        <el-form
          ref="form"
          :model="form"
          class="perForm"
          label-width="auto"
          size="medium"
        >
          <el-form-item label="SN码:" prop="sn">
            <el-input
              id="head-input"
              v-model="form.snCode"
              type="textarea"
              placeholder="请输入SN码"
              :autosize="{ minRows: 2, maxRows: 5 }"
              style="width: 400px; height: 50px"
              @keydown.enter.native="snbutton"
            />
          </el-form-item>
        </el-form>
      </div>

      <div class="contentDiv" v-if="submitShow">
        <el-form
          class="perForm"
          label-width="auto"
          size="medium"
          v-for="(item, index) in items"
          :key="index"
        >
          <el-form-item label="类型:" prop="cardType">
            <el-select v-model="item.cardType" placeholder="请选择类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="卡号:" prop="cardNumber">
            <el-input
              v-model="item.cardNumber"
              style="width: 400px; height: 50px"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="dialog_footer">
      <el-button type="primary" style="font-size: 24px" @click="submit"
        >提 交</el-button
      >
      <el-button type="primary" style="font-size: 24px" @click="addItem"
        >添 加</el-button
      >
      <el-button style="font-size: 24px" @click="resetting">重 置</el-button>
    </div>
  </div>
</template>
      
    <script>
// failsafeList  13008
import { submitDebugging, getDebugging } from "@/api/apppro/index";
export default {
  name: "DebuggingStation",
  props: {
    formObj: Object,
  },
  data() {
    return {
      form: {},
      loading: false,
      templateList: [],
      stationCheckExamineList: [],
      stationCheck: {},
      //循环的数组
      items: [
        {
          cardType: "",
          cardNumber: "",
        },
      ],
      //下拉框
      options: [
        {
          value: "移动物联网卡",
          label: "移动物联网卡",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
      submitShow:false,
    };
  },

  created() {
    // this.getCode();
    // this.getList();
  },
  methods: {
    getList() {},

    //添加
    addItem() {
      // 点击按钮时向数组中添加新的数据
      this.items.push({
        cardType: "",
        cardNumber: "",
      });
    },
    //重置
    resetting() {
      this.items = [
        {
          cardType: "",
          cardNumber: "",
        },
      ];
    },
    //根据sn码匹配工单信息
    snbutton() {
      let params = {
        snCode: this.form.snCode,
        workorderCode: this.formObj.workorderCode,
      };
      getDebugging(params).then((res) => {
        console.log(res, "查询的res");
        if(res.code == 200){
            this.submitShow = true
        }
      });
    },
    //提交
    submit() {
      for (const item of this.items) {
        if (item.cardType === "移动物联网卡" && item.cardNumber.length !== 20) {
          // 如果条件不满足，进行相应的处理，例如提示用户或阻止提交
          this.$modal.msgError("卡号不等于20位");
          return; // 阻止提交
        }
      }

      let params = { ...this.formObj };
      params.debuggingWorkDetailList = this.items;
      params.snCode = this.form.snCode;
      submitDebugging(params).then((res) => {
        console.log(res, "提交的res");
        if (res.code == 200) {
          this.$modal.msgSuccess(res.msg);
          this.items = [{ cardType: "", cardNumber: "" }];
        }
      });
    },
  },
};
</script>
    <style rel="stylesheet/scss" lang="scss" scoped>
.perForm ::v-deep .el-form-item__label {
  font-size: 28px;
}

.contentDiv ::v-deep .el-alert__title {
  font-size: 20px;
}
.contentDiv ::v-deep .el-alert__icon {
  font-size: 20px;
}
.content {
  // margin-top: 20px;
  // text-align: center;
  display: flex;
  justify-content: center;
  // width: 100%;
}

.dialog_footer {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  // display: flex;
  // justify-content: center;
}

.sn_box {
  text-align: left;
  margin-left: 10%;
  font-size: 20px;
  line-height: 40px;
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep input[type="number"] {
  -moz-appearance: textfield;
}
</style>
      